<template>
	<view class="header-login">
		<up-row justify="space-between" gutter="10" customStyle="margin-bottom: 10px;">
			<up-col span="3">
				<view class="demo-layout bg-purple-image">
					<template v-if="userInfo.token && userInfo.mobile">
						<up-avatar size="60" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/icon_head_login.png"></up-avatar>
					</template>
					<template v-else>
						<up-avatar size="60" src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/icon_head_n.png"></up-avatar>
					</template>
				</view>
			</up-col>
			<up-col span="6">
				<view class="demo-layout bg-purple">
					<!-- 1 有手机号 -->
					<view class="login" v-if="userInfo.token && userInfo.mobile">用户 {{ userInfo.mobile }}</view>
					<view class="equity" v-if="userInfo.mobile && userInfo.token && userInfo.version != 'audit'">你的权益 联合会员</view>
					<view class="nologin" v-if="!(userInfo.mobile && userInfo.token)">请登录...</view>

					<view class="noequity" v-if="!(userInfo.mobile && userInfo.token)">立即登陆</view>
				</view>
			</up-col>
			<up-col span="3">
				<view class="btn-login" v-if="!(userInfo.mobile && userInfo.token)">
					<view class="">
						<!-- #ifdef MP-ALIPAY -->
						<!-- <button class="wx-btn" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumber" @error="handleAuthError">登录</button> -->
						<button class="wx-btn" @click="btnGoH5">登录</button>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<button class="wx-btn" @click="btnGoH5">登录</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="wx-btn" @click="btnGoH5">登录</button>
						<!-- <button class="wx-btn" @click="selectLoginType">登录</button> -->
						<!-- #endif -->
					</view>
				</view>
			</up-col>
		</up-row>
		<uni-popup ref="loginTypeRef" type="bottom" border-radius="10px 10px 0 0">
			<view class="successConfirm">
				<view class="title">请选择登陆方式</view>
				<view class="btn-mini">
					<button class="wx1-btn" @click="btnGoH5">验证码登陆</button>

					<!-- #ifdef MP-ALIPAY -->
					<button class="wx1-btn" style="margin-top: 20rpx" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumber1" @error="handleAuthError">
						小程序授权登录
					</button>
					<!-- #endif -->

					<!-- #ifdef MP-WEIXIN -->
					<button class="wx1-btn" type="default" open-type="getPhoneNumber" @getphonenumber="getWXphoneNumber1">小程序授权登录</button>
					<!-- #endif -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import initApi from '@/apis/init.js';
import { constStore } from '@/store/const.js';
import { useUserStore } from '@/store/user.js';
import { getALPhoneNumber, getWXphoneNumber, uuIds, getPhoneNumber, handleAuthError } from '@/utils/login.js';
const { constInfo } = constStore();
const { userInfo } = storeToRefs(useUserStore());
const loginTypeRef = ref();
const show = ref(false);
const btnGoH5 = () => {
	loginTypeRef.value.close();
	uni.navigateTo({
		url: '/pages/login/login'
	});
};
const getPhoneNumber1 = () => {
	loginTypeRef.value.close();
	getPhoneNumber();
};
const getWXphoneNumber1 = (e) => {
	loginTypeRef.value.close();
	getWXphoneNumber(e);
};
const selectLoginType = () => {
	loginTypeRef.value.open('center');
};

const logoutUser = async () => {
	const res = await initApi.authLogout();
	if (res.code == 20000) {
		userInfo.value.info = {};
		userInfo.value.mobile = null;
		userInfo.value.token = null;
		uni.removeStorageSync('token');
		return uni.utils.toast('退出成功');
	} else {
		userInfo.value.info = {};
		userInfo.value.mobile = null;
		userInfo.value.token = null;
		uni.removeStorageSync('token');
		return uni.utils.toast('退出成功');
	}
};
</script>

<style lang="scss" scoped>
.successConfirm {
	width: 400rpx;
	background-color: #fff;
	height: 300rpx;
	border-radius: 10rpx 10rpx 0 0;
	.title {
		font-size: 30rpx;
		color: #818181;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.btn-mini {
		height: 230rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}
}
.btn-login {
	display: flex;
	justify-content: flex-start;
}
.wx-btn {
	width: 140rpx;
	height: 58rpx;
	background: linear-gradient(90deg, #3b9af9 0%, #3cdabb 100%);
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	border: 2rpx solid #ffffff;
	line-height: 58rpx;

	font-weight: 400;
	font-size: 26rpx;
	color: #ffffff;
	text-align: center;
}
.wx1-btn {
	width: 300rpx;
	height: 80rpx;
	background: linear-gradient(90deg, #3b9af9 0%, #3cdabb 100%);
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	border: 2rpx solid #ffffff;
	line-height: 80rpx;

	font-weight: 400;
	font-size: 30rpx;
	color: #ffffff;
	text-align: center;
}
.header-login {
	width: 750rpx;
	margin: 0 auto;
	height: 204rpx;
	background-image: url(https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/headBg.png);
	background-size: cover;
	background-repeat: no-repeat;
}

.demo-layout {
	height: 200rpx;
}
.bg-purple {
	display: flex;
	flex-direction: column;
	justify-content: center;
	view {
		line-height: 50rpx;
	}
	.login {
		background: -webkit-linear-gradient(0.8403845329815536deg, #fbce9f 11%, #faebaa 73%, #ff7477 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 36rpx;
		font-weight: 600;
	}
	.equity {
		height: 32rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		line-height: 38rpx;
	}
	.nologin {
		color: #fff;
	}
	.noequity {
		font-size: 28rpx;
		color: #fff;
	}
}
.bg-purple-image {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
</style>
